"use client"; // 添加这一行，使组件变为 Client Component
import { useContext, useEffect, useRef } from "react";
import { useDrag, useDragDropManager, useDrop } from "react-dnd";
import DragegableView from "../Draggable";

import { acceptTypes } from "@/utils/reactDnd/reactDnd";
import { NodeMapContext } from "@/providers/NodeMapContext";
import { useHoverPositionView } from "@/utils/reactDnd/useHoverPosition";
import { addlastHoverData, setBoxData } from "@/store/client/modules/reactdndStore";
import { useAppDispatch } from "@/store/client";
import { useNodeMap } from "@/store/client/modules/reactdndStore/useNode";


const MIddleDropableView: React.FC = () => {
  const dispatch = useAppDispatch()
  const { boxData, boxIndex } = useNodeMap()
  const dragDropManager = useDragDropManager();
  useEffect(() => {
    const monitor = dragDropManager.getMonitor();
    const unsubscribe = monitor.subscribeToStateChange(() => {

      // const item = monitor.getItem();
      // console.log("monitor?", monitor);
      // console.log("是否正在拖拽?", monitor.isDragging());
      // console.log("getItem", monitor.getItem())
      // const dropResult = monitor.getDropResult();
      // console.log("getDropResult", dropResult)
      if (!monitor.isDragging()) { // 拖拽刚结束
        
        // if (dropResult) { // 如果有 drop 结果，说明成功放置
        //   if (props.insertPosition === HoverPositionType.MIDDLE) {
        //     // console.log('全局监听：放置事件', dropResult);
        //   }

        // }

      }
    });

    return () => unsubscribe();
  }, [dragDropManager]);

  // useEffect(() => {
  //   console.log("boxIndex", boxIndex)
  //   console.log("boxData", boxData)
  // }, [boxIndex])

  const refDrop = useRef<HTMLDivElement>(null);
  const [{ isOver, canDrop }, drop] = useDrop(() => ({
    accept: acceptTypes,
    collect: (monitor) => ({
      isOver: monitor.isOver({ shallow: true }),
      canDrop: monitor.canDrop(),
    }),
    drop: (item: any, monitor: any) => {
      dispatch(setBoxData({ item, monitor, parentId: "root" }))
    },
    hover(item: any, monitor) {

    }
  }))
  drop(refDrop)
  useEffect(() => {

  }, [])
  return (

    <div ref={refDrop}
      className={`w-full h-full inline-block  rounded border border-dashed border-gray-400`}>
      {boxIndex['root']?.map((node:string, index: any) => {
        return <DragegableView key={node} id={node} />
      })}
    </div>
  )
}
export default MIddleDropableView;